<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    <style>
        body {
            height: 100%;
            background-color: #39393b;
        }
    </style>
</head>
<body>
<!--
*************************************************************************
   Generated by HCODE at 2017-06-30 15:02:05
   From: https://code.hcharts.cn/demos/hhhhxW?hc-theme=dark-unica
*************************************************************************
 -->
<div style="margin-top: 15%">
    <div id="container" style="min-width:400px;height:400px"></div>
</div>
<script>
    $(function () {
        setInterval(function () {
            //定时器要执行的代码
            func()
        }, 30000);
        function func() {
            var data;
            $.ajax({
                url: "", context: document.body, async: false, success: function (getdata) {
                    data = getdata;
                }
            });

{#            console.log(JSON.stringify(data));#}

            $('#container').highcharts({
                chart: {
                    type: 'area'
                },
                title: {
                    text: '占比'
                },
                subtitle: {
                    text: '数据来源: Wikipedia.org'
                },
                xAxis: {
                    {#                categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],#}
                    categories: data['categories'],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: '百分比'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} 百万)<br/>',
                    shared: true
                },
                plotOptions: {
                    area: {
                        stacking: 'percent',
                        lineColor: '#ffffff',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#ffffff'
                        }
                    }
                },
                series: data['series']
            });
        }

        func()
    });
</script>
</body>
</html>